<template>
    <div >
        <Header :position="positionTitle"></Header>
        <el-tabs type="border-card" v-model="activeName" >
          <el-tab-pane label="操作记录" name="first"></el-tab-pane>
          <el-tab-pane label="系统故障记录" name="second"></el-tab-pane>
          <el-tab-pane label="电池运行参数记录" name="third"></el-tab-pane>
          <el-tab-pane label="电池运行参数异常记录" name="fourth"></el-tab-pane>
        </el-tabs>
        <el-card style="margin-top: -35px;height: 837px">
          <div style="display: flex">
            <div>
              <div style="width: 200px; padding: 20px; margin-left: 30px ">
                <h3>操作记录（条）</h3>
                <h1 style="color: #91cc75;font-size:100px">{{operationNum}}</h1>
              </div>
            </div>
          <div style="display: flex;margin-top: 20px;margin-right: 100px;
                       flex-flow: column;align-items: center;margin-left: 50px">
            <div style="display: flex;align-items:center;height: 40%">
              <label style="font-size: 20px;color: black;width: 50px;margin-right: 10px">删除</label>
                <el-progress percentage="53" style="width: 300px"></el-progress>
            </div>
              <div style="display: flex;align-items:center;height: 40%;">
                      <label style="font-size: 20px;color: black;width: 50px;margin-right: 10px">修改</label>
                      <el-progress percentage="47" style="width: 300px"></el-progress>
              </div>
          </div>

          <div style="width: 70%;margin-right: 50px">
              <h3>操作管理数量统计</h3>
              <div id="WaveformGraph" style="height: calc(100% - 20px);width: 100%;margin-left: 20px"></div>
          </div>

          </div>
          <el-table :data="dataList" stripe height="575" style="width: 100%">
            <el-table-column label="序号" prop="indexNum">
            </el-table-column>
            <el-table-column label="操作名称" prop="operationName">
                <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.operationName}}</span>
                    <div v-show="slot.row.editable">
                        <el-input v-model="slot.row.operationName"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作用户" prop="operationUser">
                <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.operationUser}}</span>
                    <div v-show="slot.row.editable">
                        <el-input v-model="slot.row.operationUser"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="时间" prop="operationTime">
                <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.operationTime}}</span>
                    <div v-show="slot.row.editable">
                        <el-input v-model="slot.row.operationTime"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="说明" prop="Description">
                <template slot-scope="slot">
                    <span v-show="!slot.row.editable">{{slot.row.Description}}</span>
                    <div v-show="slot.row.editable">
                        <el-input v-model="slot.row.Description"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="slot">
<!--                <template>-->
                <el-button size="mini" type="danger">删除</el-button>
              <el-button size="mini" type="primary" @click="updateItem(slot.row)"  v-show="!slot.row.editable">修改</el-button>
              <el-button size="mini" type="primary" @click="updateItem(slot.row)"  v-show="slot.row.editable">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="20"
              style="display: inline-block"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </el-card>
        <el-dialog
                title="提示"
                :visible.sync="updateVisible"
                width="500px"
        >
            <div>
                <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
                    <div class="filelabel row-left" style="width: 100px"><p>操作名称</p></div>
                    <div class="titleinput row-right">
                        <el-input  placeholder="请输入操作名称" v-model="updateItemInfo.operationName" ></el-input>
                    </div>
                </div>

                <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
                    <div class="filelabel row-left"  style="width: 100px"><p>操作用户</p></div>
                    <div class="titleinput row-right">
                        <el-input  placeholder="请输入操作用户" v-model="updateItemInfo.operationName"></el-input>
                    </div>
                </div>

                <div style="margin-top: 15px; margin-left: 50px;align-items: center" class="display-row">
                    <div class="filelabel row-left"  style=" width: 100px"><p>说明</p></div>
                    <div class="titleinput row-right">
                        <el-input  placeholder="请输入说明" v-model="updateItemInfo.Description"></el-input>
                    </div>
                </div>



            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updateVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import Header from "../Header";
    import * as echarts from "echarts";
  export default {
    name: 'actionCard',
      components:{Header},
    data(){
      return{
        activeName:'first',
        operationNum:236,
        dataList:[
          {indexNum:'1',operationName:'故障预警',operationUser:'关泽宇',operationTime:'2020-11-07',Description:'无',editable:false,},
          {indexNum:'2',operationName:'故障处理',operationUser:'白玉泉',operationTime:'2020-11-08',Description:'无',editable:false,},
          {indexNum:'3',operationName:'故障预警',operationUser:'叶元明',operationTime:'2020-11-09',Description:'无',editable:false,},
          {indexNum:'4',operationName:'故障处理',operationUser:'宋修齐',operationTime:'2020-11-10',Description:'无',editable:false,},
          {indexNum:'5',operationName:'故障处理',operationUser:'常经赋',operationTime:'2020-11-11',Description:'无',editable:false,},
          {indexNum:'6',operationName:'故障预警',operationUser:'孟鸿志',operationTime:'2020-11-12',Description:'无',editable:false,},
          {indexNum:'7',operationName:'故障预警',operationUser:'黄玉树',operationTime:'2020-11-13',Description:'无',editable:false,},
        ],
          positionTitle:{
              secondTitle:'操作管理' ,
              thirdTitle:'事件记录',
              routeString:'/DataManagement/DateFile'
          },
          updateVisible:false,
          updateItemInfo:{},
          WaveformGraphData:{
            xData:['19:54','19:55','19:56','19:57','19:58','19:59','20:00'],
              value1:[120, 132, 101, 134, 90, 230, 210],
              value2:[220, 182, 191, 234, 290, 330, 310],
          }
      }
    },
      mounted() {
          this.DrawWaveformGraph()
      },
      methods:{
          updateItem(item){
              if(!item.editable)
                  item.editable=true
              else
                  item.editable=false
              // this.updateItemInfo=item
              // this.updateVisible=true
          },
          DrawWaveformGraph(){
              let myChart = echarts.init(document.getElementById('WaveformGraph'));
              let option = {
                  tooltip : {
                      trigger: 'axis'
                  },
                  legend: {
                      data:['删除','修改']
                  },
                  toolbox: {
                      show : true,
                      feature : {
                          mark : {show: true},
                          // dataView : {show: true, readOnly: true},
                          magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                          restore : {show: false},
                          saveAsImage : {show: false}
                      }
                  },
                  calculable : true,
                  xAxis : [
                      {
                          type : 'category',
                          name:'时间',
                          axisTick: {show: false},
                          data : this.WaveformGraphData.xData
                      }
                  ],
                  yAxis : [
                      {
                          name: '次数',
                          type : 'value'
                      }
                  ],
                  grid: {
                      x: 50,
                      y:30,
                      x2: 50,
                      y2:30,
                  },
                  series : [
                      {
                          name:'删除',
                          type:'bar',
                          data:this.WaveformGraphData.value1
                      },
                      {
                          name:'修改',
                          type:'bar',
                          data:this.WaveformGraphData.value2
                      },
                  ]
              };
              myChart.setOption(option);
          },
      }
  }
</script>

<style scoped>
    .display-row {
        display: -webkit-flex; /* Safari */
        -webkit-justify-content: flex-start; /* Safari 6.1+ */
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    .row-left {
        font-size: 20px;
        width: 6%;
        font-weight: bold;

    }

    .row-right{
        width: 50%;
    }

    .titleClass {
        color: gray;
    }

    .row {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .row-margin {
        margin-top: 20px;
    }

    .text {
        font-weight: bold;
        width: 30%;
        text-align: right;
    }
</style>
